<template>
<div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" size="mini">
        <el-form-item label="流程名称" prop="processName">
            <el-input v-model="queryParams.processName" placeholder="请输入流程名称" clearable  @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="接收时间">
            <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" v-hasPermi="['workflow:process:todoExport']" @click="handleExport">导出</el-button> -->
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="todoList" border size="mini" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
        <el-table-column label="流程名称" align="center" prop="procDefName" />
        <el-table-column label="任务节点" align="center" prop="taskName" />
        <el-table-column label="流程版本" align="center">
            <template slot-scope="scope">
                <el-tag size="medium">v{{scope.row.procDefVersion}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="流程发起人" align="center">
            <template slot-scope="scope">
                <label>{{scope.row.startUserName}}
                    <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag>
                </label>
            </template>
        </el-table-column>
        <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)" v-hasPermi="['workflow:process:approval']">办理
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess2(scope.row)">处理2
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess3(scope.row)">处理3
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</template>

<script>
import {
    listTodoProcess
} from '@/api/workflow/process';
import RightToolbar from "@/components/RightToolbar"
import Pagination from "@/components/Pagination"

export default {
    name: "Todo",
    components: {
        RightToolbar,
        Pagination
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 流程待办任务表格数据
            todoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                category: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {}
        };
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.getList()
        })
    },
    methods: {
        /** 查询流程定义列表 */
        getList() {
            this.loading = true;
            listTodoProcess(this.queryParams).then(response => {
                this.todoList = response.data.data.records;
                this.total = response.data.data.total;
                this.loading = false;
            });
        },
        // 跳转到处理页面
        handleProcess(row) {
            this.$router.push({
                path: '/workflow/process/detail/' + row.procInsId,
                query: {
                    definitionId: row.procDefId,
                    deployId: row.deployId,
                    taskId: row.taskId,
                    finished: true
                }
            })
        },
        handleProcess2(row) {
            let tt = this.$router.$avueRouter.getPath({
                src: 'http://localhost:1888/$/test?',
                comName: 'myform',
                procInsId: row.procInsId,
                executionId: row.executionId,
                deployId: row.deployId,
                taskId: row.taskId,
                finished: true
            })
            console.log(tt)
            this.$router.push({
                path: tt
            })
        },
        handleProcess3(row) {
            let tt = this.$router.$avueRouter.getPath({
                src: 'http://localhost:1888/$/test?',
                comName: 'mytable',
                procInsId: row.procInsId,
                executionId: row.executionId,
                deployId: row.deployId,
                taskId: row.taskId,
                finished: true
            })
            console.log(tt)
            this.$router.push({
                path: tt
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                name: null,
                category: null,
                key: null,
                tenantId: null,
                deployTime: null,
                derivedFrom: null,
                derivedFromRoot: null,
                parentDeploymentId: null,
                engineVersion: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加流程定义";
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('workflow/process/todoExport', {
                ...this.queryParams
            }, `wf_todo_process_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    margin: 5px 5px;
}
.app-container .el-form-item {
    margin-bottom: 2px;
}

.top-right-btn {
    position: relative;
    float: right;
    margin-right: 20px;
}
.mb8{
   margin-bottom: 5px;
}
</style>
